<template>
    <vp-btn v-bind="$attrs" @click="handleClick" class="vp-btn-more" style="padding: 8px 8px 8px 15px;">
        <vp-label zh="展开" en="Expand" v-if="!formData.showMore" />
        <vp-label zh="收起" en="Collapse" v-else />
        <el-icon style="margin-left: 8px;"><ele-ArrowUp v-if="formData.showMore" /><ele-ArrowDown v-else/></el-icon>
    </vp-btn>
</template>

<script setup lang="ts" name="VpBtnMore">
import { ref, watch } from 'vue'

const emits = defineEmits(['change']);

const props = defineProps({
	showMore: {
		type: Boolean,
		default: () => false,
	},
});

const formData = ref({
    showMore: props.showMore,
})

watch(() => props.showMore, () => {
	formData.value.showMore = props.showMore;
});

const handleClick = () => {
    formData.value.showMore = !formData.value.showMore;
    emits("change", formData.value.showMore);
}

</script>

<style scoped>

.vp-search-more-btn-hidden .vp-btn-more {
	display: none;
}


</style>